<template>
	<view class="content">
		<view class="top">
			<u-navbar title="我的" placeholder bgColor="#CE3026" :titleStyle="{fontSize:'32rpx',fontWeight:'700',color:'#fff'}"><view class="" slot="left"></view></u-navbar>
			<view class="user" @click="toProfile">
				<view class="user_avatar">
					<img :src="user.image ? (baseUrl + user.image) : defaultUserAvatar" alt="" v-if="user.id">
				</view>
				<view class="user_info">
					<view class="user_info_nologin" v-if="!user">
						请登录
					</view>
					<view class="user_info_name" v-if="user">
						{{user.name || ''}}
					</view>
					<view class="user_info_phone" v-if="user">
						{{user.mobile ? user.mobile : '未绑定'}}
					</view>
				</view>
			</view>
		</view>
		<u-cell title="预约记录" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" @click="toApply">
			<img src="/static/images/my/reservations.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
		</u-cell>
		<u-cell title="浏览记录" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" @click="toRecord('浏览记录','1')">
			<img src="/static/images/my/records.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
		</u-cell>
		<u-cell title="我的收藏" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" @click="toRecord('我的收藏','2')">
			<img src="/static/images/my/collections.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
		</u-cell>
		<u-cell title="关于我们" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" @click="toAboutUs">
			<img src="/static/images/my/about.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
		</u-cell>
		<u-cell title="联系我们" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" @click="toConcatUs">
			<img src="/static/images/my/contact.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
		</u-cell>
		<button open-type="contact" class="contact">
			<u-cell title="客服" isLink :customStyle="{color:'#333',backgroundColor:'#fff'}" :titleStyle="{color:'#333',fontSize: '28rpx'}" :border="false">
				<img src="/static/images/my/customerService.png" alt="" slot="icon" style="width: 36rpx;height: 36rpx;">
			</u-cell>
		</button>
		
		<m-tabbar fixed fill current="2" :tabbar="tabbar">
			<template v-slot:tabbar_index_1>
				<button open-type="contact" class="custom_btn">
					<view class="custom_style">
						<view class="custom_style_img">
							<img src="/static/images/tabbar/tabbar_kefu.png" alt="">
						</view>
						<view class="custom_style_text">
							联系客服
						</view>
					</view>
				</button>
			</template>
		</m-tabbar>
	</view>
</template>

<script>
	import TabbarConfig from '@/config/tabbar.js'
	import {baseUrl} from '@/api/request.js'
	export default {
		data() {
			return {
				tabbar:TabbarConfig,
				user:{},
				baseUrl,
				defaultUserAvatar:require('@/static/images/default_user.png')
			}
		},
		onShow() {
			this.user =  uni.getStorageSync('user')
		},
		methods: {
			toProfile(){
				uni.navigateTo({
					url:'/pages/my/profile'
				})
			},
			toApply(){
				uni.navigateTo({
					url:'/pages/record/apply'
				})
			},
			toRecord(title, type){
				uni.navigateTo({
					url:`/pages/record/record?title=${title}&type=${type}`
				})
			},
			toConcatUs(){
				uni.navigateTo({
					url:'/pages/index/concatUs'
				})
			},
			toAboutUs(){
				uni.navigateTo({
					url:'/pages/index/aboutUs'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.top {
		background-color: #CE3026;
		.user {
			padding: 44rpx 24rpx;
			display: flex;
			align-items: center;
			&_avatar {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				opacity: 1;
				border: 4rpx solid rgba(255,255,255,0.5);
				img {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
				}
			}
			&_info {
				height: 124rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 38rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
				&_phone {
					font-size: 28rpx;
					line-height: 33rpx;
					margin-bottom: 18rpx;
				}
			}
		}
	}
	.u-cell__body {
		height: 108rpx !important;
		box-sizing: border-box;
		font-family: PingFang SC-Regular, PingFang SC;
	}
	.contact {
		padding: 0;
		margin-top: -1rpx;
		text-align: left;
	}
</style>
